<template>
  <div class="body">
    <div class="sign-wrapper">
      <div class="activeBanner">
        <img v-bind:src="activeinfo.introUrl" alt="">
      </div>
      <div class="activeTitle blockB ">
        <p class="activeTitleName">{{activeinfo.name}}</p>
        <p class="activeAssist" >已有<span class="signNum">{{activeinfo.nowUser}}</span>/{{activeinfo.maxUser}}人报名<span class="endTime">{{activeinfo.daysRemain}}天后结束报名</span></p>
      </div>
      <div class="blockB contentInfo baseInfo">
        <p class="contentTilte">基本信息</p>
        <div class="border"></div>
        <p>活动时间：{{activeinfo.startTime}}-{{activeinfo.endTime}}</p>
        <div class="border"></div>
        <p>活动地点：{{activeinfo.activityLocation}}</p>
      </div>
      <div class="blockB contentInfo baseInfo">
        <p class="contentTilte">活动详情</p>
        <div class="border"></div>
        <div class="contentDetailInfo">
          {{activeinfo.detailUrls}}
        </div>
        <div>
          <img src="" alt="" class="contentImg">
        </div>
      
      </div>
      <div v-if="show">
        <div class="signBlock cancel" v-if="status" @click="cancelActivity">
          <span class="cancelButton">取消报名</span>
        </div>
        <div class="signBlock" v-else @click="enrollActivity">
          <span class="signButton">我要报名</span>
          <span if-seen={isSeen}>({{activeinfo.daysRemain}}天后结束)</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import api from '../../api'
  export default {
    name: 'sign',
    data() {
      return {
        show: false,
        status: false,
        activeinfo: {}
      }
    },
    mounted(){
      api.getActiveInfo({id: this.$route.params.id}).then((res) => {
        if (res && res.data) {
          this.activeinfo = res.data;
          if (res.data.userApplystatus === "0") {
            this.status = false;
          } else {
            this.status = true;
          }
          this.show = true
        }
      })
    },
    computed: {
    },
    methods: {
      enrollActivity(){
        api.activity({id: this.$route.params.id}).then((res) => {
          if (res && res.data && res.data.orderNO) {
            this.status = true
          }
        })
      },
      cancelActivity(){
        api.cancelActive({id: this.$route.params.id}).then((res) => {
          if (res && res.data) {
            if (res.data.code === 0 && res.data.code === '0') {
              // 取消成功
              this.status = true
            } else {
              this.status = false;
            }
          }
        })
      }
    }
  }
</script>
<style lang="postcss" scoped>
  .sign-wrapper {
    width: 375px;
    font-size: 13px;
    background: #F6F6F6;
    .blockB{
      margin-bottom: 10px;
    }
    .border{
      width: 335px;
      height: 1px;
      background: #EEEEEE;
    }
    .contentInfo{
      background: #fff;
      padding: 0 20px 0 20px;
    }
    .activeBanner{
      width: 375px;
      height: 200px;
      background:#f3f3f3;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .activeTitle{
      background: #fff;
      height: 68px;
      p{
        padding:0 20px 0 20px;
      }
      .activeTitleName{
        font-size: 18px;
        height: 25px;
        line-height: 25px;
        padding:10px 0 5px 20px;
      }
      .activeAssist{
        font-size:12px;
        color:#AAA;
        .signNum{
          color:red;
        }
      }
      .endTime{
        float: right;
      }
    }
    .baseInfo{
      p{
        font-size: 14px;
        height: 50px;
        line-height:50px;
      }
      .contentTilte{
        text-align:center;
        font-size: 15px;
        height: 55px;
        line-height:55px;
      }
    }
    .contentDetailInfo{
      padding-top:13px;
      .contentImg{
        height: 200px;;
      }
    }
    .signBlock{
      position: fixed;
      bottom:0;
      left: 0;
      width: 375px;
      height: 52px;
      line-height: 52px;
      background: #FD5729;
      color: #fff;
      &.cancel{
        background:#B0B0B0;
        text-align:center;
      }
      .signButton{
        font-size: 18px;
        margin-left:144px;
      }
      .cancelButton{
        font-size: 18px;
        margin: 0 auto;
      }
    }
  }
</style>